<template>

	<view class="content">
		<view class="top-wrap">
			<TopSearch></TopSearch>
			<Swiper></Swiper>
			<Category :data="categoryList"></Category>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower">
			<Floor :flooe-listleft="goodsList1" :flooe-listright="goodsList2" ></Floor>
		</scroll-view>
	</view>

</template>

<script>
	import Swiper from "./components/swiper.vue"
	import TopSearch from "./components/top-search.vue"
	import Category from "./components/category.vue"
	import Floor from "./components/floor.vue"
	import { checkLogin } from "@/utils/requests.js"
	import {
		getCategoryListApi
	} from "@/http/category.js"
	import {
		indexGoodsListApi
	} from "@/http/goods.js"

	export default {
		data() {
			return {
				triggered: false,
				categoryList: [],
				goodsQuery: {
					page: 0,
					pageSize: 100,
					categoryUd: null,
					sellerId: null
				},
				total:0,
				goodsList1: [],
				goodsList2: []
			}
		},
		components: {
			Swiper,
			TopSearch,
			Category,
			Floor
		},
		onLoad() {
			// 校验登录
			checkLogin();
			
			// 获取信息
			this.getCategoryList();
			this.queryGoodsList()
		},
		methods: {
			// 获取分类信息
			async getCategoryList() {
				const list = await getCategoryListApi();
				if (list) {
					this.categoryList = list;
				}
			},

			// 获取楼层商品信息
			async queryGoodsList() {
				const res = await indexGoodsListApi(this.goodsQuery);
				const end = res.records.length+1
				const mid = end / 2;
				this.goodsList1 = res.records.slice(0,mid);
				this.goodsList2 = res.records.slice(mid, end);
				// console.log(res.records.length - 1);
			},


			// 触底
			scrolltolower() {
				console.log("触底")
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		background-color: #fbf9ec;
		min-height: 100vh;


		.top-wrap {
			background-color: #ffffff;
			padding-bottom: 10rpx;
			box-shadow: -2rpx -2rpx 2rpx rgb(209, 209, 209) inset;
			border-radius: 20rpx;
		}
	}
</style>